<script setup lang='ts'>
import { useEcharts } from '@/hooks/useEcharts'
import { createBarChart } from './charts/barChart'
import { createLineChart } from './charts/lineChart'

// 获取dom
const barChart = useTemplateRef('barChart')
// 使用hooks
const { updateChart: updateBarChart } = useEcharts(barChart, createBarChart())
// 获取数据
useRequest(() => apiChartsBarReq(), {
  onSuccess(res) {
    updateBarChart(createBarChart({
      xData: res.xData,
      y1: res.sellCount,
      y2: res.profitCount,
    }))
  },
})

// 折线图
const lineChart = useTemplateRef('lineChart')
const { updateChart: updateLineChart } = useEcharts(lineChart, createLineChart())
// 获取数据
useRequest(() => apiChartsLineReq(), {
  onSuccess(res) {
    updateLineChart(createLineChart({
      xData: res.xData,
      y1: res.userCount,
      y2: res.visitCount,
    }))
  },
})
</script>

<template>
  <div>
    <h1>Vue3 如何写图表</h1>

    <div grid grid-cols-2 gap20>
      <!-- 柱状图 -->
      <div ref="barChart" h300 />
      <!-- 折线图 -->
      <div ref="lineChart" />
    </div>
  </div>
</template>

<style lang='less' scoped>

</style>
